<template>
  <div>
    <el-button-group style="margin-bottom: 15px">
      <el-button type="primary" @click="drawer = true">新增</el-button>
    </el-button-group>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        fixed
        type="index"
        width="50"
        label="#"
      ></el-table-column>
      <el-table-column prop="title" label="题目" width="820">
        <template v-slot="slotProps">
          <el-link @click="doDetails(slotProps.row)" type="primary">{{
            slotProps.row.title
          }}</el-link>
        </template>
      </el-table-column>
      <el-table-column
        :formatter="(row) => classifyObj[row.cid]"
        label="分类"
        width="70"
      >
      </el-table-column>
      <el-table-column prop="name" label="作者" width="80"> </el-table-column>
      <el-table-column prop="date" label="发布时间" width="150">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="updateClk(scope.row)" type="text" size="small"
            >修改</el-button
          >
          <el-button type="text" size="small" @click="removeClk(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-drawer
      :wrapperClosable="false"
      size="50%"
      title="我是标题"
      :visible.sync="drawer"
      :with-header="false"
    >
      <!-- <el-page-header style="margin: 15px" title="返回" @back="drawer = false">
      </el-page-header> -->
      <el-form
        :disabled="isDisabled"
        style="margin-top: 30px"
        ref="form"
        :model="form"
        label-width="80px"
      >
        <el-form-item label="题目">
          <el-input
            type="textarea"
            autosize
            placeholder="请输入内容"
            v-model="form.title"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="form.cid" placeholder="请选择">
            <el-option
              v-for="(val, key) in classifyObj"
              :key="key"
              :label="val"
              :value="Number(key)"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选项">
          <el-checkbox-group v-model="form.answers">
            <div v-for="(item, index) in form.options" :key="index">
              <el-checkbox :label="item.index"></el-checkbox>
              <el-input
                type="textarea"
                autosize
                placeholder="请输入内容"
                v-model="item.value"
              >
              </el-input>
              <el-button
                v-if="index == form.options.length - 1 && letter <= 89"
                type="success"
                size="small"
                style="margin-left: 10px; height: 33px"
                icon="el-icon-plus"
                circle
                @click="doAddOptions(index)"
              ></el-button>
              <el-button
                class="deleteBtn"
                v-if="index > 3"
                type="danger"
                size="small"
                style="height: 33px"
                icon="el-icon-minus"
                circle
                @click="doDeleteOptions(index)"
              ></el-button>
            </div>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="答案">
          <div>{{ doSort(form.answers).join(",") }}</div>
        </el-form-item>
        <el-form-item label="答案提示">
          <el-input
            type="textarea"
            autosize
            placeholder="请输入内容"
            v-model="form.tips"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div v-if="!isDisabled" style="margin-left: 80px">
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="doClear">取消</el-button>
      </div>
      <div v-else style="margin-left: 80px">
        <el-button type="primary" @click="doClear">确定</el-button>
      </div>
    </el-drawer>
    <el-pagination
      @current-change="handleCurrentChange"
      layout="total,prev, pager, next"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
export default {
  layout: "main",
  data() {
    return {
      drawer: false,
      form: {
        answers: [],
        options: [
          { index: "A", value: "" },
          { index: "B", value: "" },
          { index: "C", value: "" },
          { index: "D", value: "" },
        ],
      },
      letter: 68,
      isDisabled: false,
    };
  },
  async mounted() {
    await this.getClassify();
    await this.getList();
  },
  methods: {
    ...mapActions("classify", ["getClassify"]),
    ...mapActions("test", ["getList", "addList", "delList"]),
    ...mapMutations("test", ["CURRENTPAGE"]),

    // 当前页改变
    handleCurrentChange(val) {
      this.CURRENTPAGE(val);
      this.getList();
    },

    // 查看详情
    doDetails(row) {
      this.isDisabled = true;
      this.form = {
        ...row,
        options: JSON.parse(row.options),
        answers: JSON.parse(row.answers),
      };
      this.drawer = true;
    },

    // 删除按钮
    async removeClk(id) {
      this.$confirm("此操作将永久删除该题目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        await this.delList({ id });
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      });
    },

    // 修改按钮
    async updateClk(row) {
      this.form = {
        ...row,
        options: JSON.parse(row.options),
        answers: JSON.parse(row.answers),
      };
      this.drawer = true;
    },

    // 提交按钮
    async onSubmit() {
      let form = {
        ...this.form,
        answers: JSON.stringify(this.doSort(this.form.answers)),
        options: JSON.stringify(this.form.options),
        uid: 1,
      };
      await this.addList(form);
      this.doClear();
    },

    // 处理答案排序
    doSort(arr) {
      return [...arr].sort();
    },

    // 获取字母
    // getLetter(index) {
    //   return String.fromCharCode("E".charCodeAt() + index);
    // },

    // 增加答案选项按钮
    doAddOptions() {
      this.letter++;
      this.form.options.push({
        index: String.fromCharCode(this.letter),
        value: "",
      });
    },

    // 删除答案选项按钮
    doDeleteOptions(index) {
      this.letter--;
      this.form.options.splice(index, 1);
      if (index != this.form.options.length) {
        this.form.options.forEach((item, idx) => {
          if (idx >= index) {
            item.index = String.fromCharCode(item.index.charCodeAt() - 1);
          }
        });
      }
      let form = this.form;
      form.answers.forEach((answer) => {
        let isTure = false;
        form.options.forEach((option) => {
          if (answer == option.index) {
            isTure = true;
          }
        });
        if (!isTure) {
          form.answers.splice(form.answers.indexOf(answer), 1);
        }
      });
    },
    // 清空表单、关闭抽屉
    doClear() {
      this.drawer = false;
      this.isDisabled = false;
      this.form = {
        answers: [],
        options: [
          { index: "A", value: "" },
          { index: "B", value: "" },
          { index: "C", value: "" },
          { index: "D", value: "" },
        ],
      };
    },
  },
  computed: {
    ...mapGetters("classify", ["classifyObj"]),
    ...mapState("test", ["tableData", "total", "currentPage"]),
  },
};
</script>

<style scoped>
.el-checkbox-group > div {
  display: flex;
  align-items: center;
}

.el-checkbox-group > div > .el-textarea {
  margin-left: 13px;
  width: 80%;
}

.el-checkbox-group > div > .deleteBtn {
  margin-left: 10px;
}

/deep/.el-drawer.rtl {
  overflow-y: scroll;
  height: 100%;
}
</style>